import React, {useEffect, useState} from 'react';
import {Card, Form, Select} from "antd";
import {type CategoryType, reqCategory1} from "@/api/attr";


function Attr() {
    type CityName = keyof typeof cityData;
    const cityData = {
        Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
        Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
    };
    // const provinceData = ['Zhejiang', 'Jiangsu'];
    // const [cities, setCities] = useState(cityData[provinceData[0] as CityName]);
    // const [secondCity, setSecondCity] = useState(cityData[provinceData[0] as CityName][0]);
    const handleProvinceChange = (value: CityName) => {
        console.log(value)
    };
    const onSecondCityChange = (value: CityName) => {
        console.log(value)
    };

    //category1Id
    const [category1Id,setCategory1Id] = useState(0)
    const [category1List,setCategory1List] = useState<CategoryType[]>([])
    //category2Id
    const [category2Id,setCategory2Id] = useState(0)

    const getCategory1 = async ()=>{
        try {
           const result =  await reqCategory1()
           setCategory1List(result)
        }catch (e){
            return Promise.reject(e)
        }
    }
    useEffect(()=>{
       getCategory1()
    },[])

    return (
        <div>
            <Card style={{height:80}}>
                <Form layout={"inline"} style={{marginLeft:60}}>
                    <Form.Item label={"一级列表"} style={{marginRight:100}}>
                        <Select
                            style={{ width: 200 }}
                            onChange={handleProvinceChange}
                            options={category1List.map((province) => ({ label: province.name, value: province.id }))}
                        />
                    </Form.Item>
                    <Form.Item label={"二级列表"} style={{marginRight:100}}>
                        <Select
                            style={{ width: 200 }}
                            onChange={handleProvinceChange}
                            // options={provinceData.map((province) => ({ label: province, value: province }))}
                        />
                    </Form.Item>
                    <Form.Item label={"三级列表"}>
                        <Select
                            style={{ width: 200 }}
                            onChange={handleProvinceChange}
                            // options={provinceData.map((province) => ({ label: province, value: province }))}
                        />
                    </Form.Item>
                </Form>
            </Card>
        </div>
    );
}

export default Attr;
